<!DOCTYPE html>
<html th:lang="${#locale.toLanguageTag}" xmlns:th="https://www.thymeleaf.org"
      th:fragment="error_fragment">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[[${#messages.msg('error.browser.title', error.status, #strings.defaultString(error.title, 'Internal server error'))}]]</title>
    <link rel="icon" th:href="${site.favicon}">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            font-family: "Microsoft YaHei";
            font-size: 14px;
            color: white;
            background-color: #2068b4;
        }

        .error-main {
            width: 800px;
            margin: 0 auto;
        }

        .error-text-1 {
            font-size: 150px;
            margin-top: 50px;
            margin-bottom: 20px;
        }

        .error-text-2, .error-text-3 {
            font-size: 30px;
        }

        .error-text-4 {
            font-size: 25px;
            margin: 30px 0 30px 0;
        }

        .error-about-text-top, .error-about-text-down {
            font-size: 20px;
        }

        .error-about {
            display: flex;
        }
    </style>
</head>
<body>
<div class="error-main">
    <p class="error-text-1">:(</p>
    <p class="error-text-2">[[#{error.blue_screen.tip1}]]</p>
    <p class="error-text-3">[[#{error.blue_screen.tip2}]]</p>
    <p class="error-text-4" id="error-text-4">0%</p>
    <div class="error-about">
        <img style="width: 137px; height: 137px; margin-right: 20px;"
        src=""
        alt="QRCODE">
        <div class="error-about-text-main">
            <p class="error-about-text-top">[[#{error.blue_screen.info.tip}]]</p>
            <ul class="error-about-text-down">
                <ol>[[#{error.blue_screen.info.tip1}]]</ol>
                <ol>[[#{error.blue_screen.info.tip2}]]</ol>
                <ol>[[#{error.blue_screen.info.tip3}]]</ol>
                <ol id="error-code"></ol>
            </ul>
        </div>
    </div>
</div>
<script th:inline="javascript">
  var n = 0
  var speed = 50

  function getUrlParams(name) { // 不传name返回所有值，否则返回对应值
    var url = window.location.search
    if (url.indexOf('?') == 1) {
      return false
    }
    url = url.substr(1)
    url = url.split('&')
    var name = name || ''
    var nameres = null
    // 获取全部参数及其值
    for (var i = 0; i < url.length; i++) {
      var info = url[i].split('=')
      var obj = {}
      obj[info[0]] = decodeURI(info[1])
      url[i] = obj
    }
    // 如果传入一个参数名称，就匹配其值
    if (name) {
      for (var i = 0; i < url.length; i++) {
        for (const key in url[i]) {
          if (key == name) {
            nameres = url[i][key]
          }
        }
      }
    } else {
      nameres = url
    }
    // 返回结果
    console.log(nameres)
    return nameres
  }

  var res1 = '/'
  var res2 = [[${error.status}]]

  var errortext = ''
  switch (res2) {
  case 502:
    errortext = 'THE SERVER RESPONDED WITH A STATUS OF 502 (Bad Gateway)'
    break
  case 403:
    errortext = 'THE SERVER RESPONDED WITH A STATUS OF 403 (Forbidden)'
    break
  case 500:
    errortext = 'THE SERVER RESPONDED WITH A STATUS OF 500 (Internal Server Error)'
    break
  default:
    errortext = 'THE SERVER RESPONDED WITH A STATUS OF 404 (NOT FOUND)'
    break
  }
  document.getElementById('error-code').innerText = errortext

  window.onload = function () {
    var timer = setInterval(function () {
      if (n <= 100) {
        if (n > 100) n = 100
        document.getElementById('error-text-4').innerText = n + '%'
        n++
      } else {
        clearInterval(timer)
        location.href = res1
      }
    }, speed)
  }
</script>
</body>
</html>